<!--
    TableContextMenu  《表格内右键菜单》

    使用方式：
        <TableContextMenu v-if="contextMenuVisible"
                      :top="top"
                      :left="left"
                      v-model:visible="contextMenuVisible"
                      :rowData="rowData"
                      :prop="prop"
                      @queryData = "queryData"/>
    1.left  坐标系 x
    2.top   坐标系 y
    3.prop  字段
    4.visible 组件可见性 使用时需加 v-model:
    1.rowData 表行数据
    1.close 关闭回调函数
-->
<template>

    <div class="mask-overall" @click="currentClose" @contextmenu.prevent="currentClose">

        <ul v-if="visible" class="contextmenu" :style="{left:left+'px',top:top+'px'}">
            <li>
                <i class="el-icon-info" style="float: left;line-height: 40px;"/>
                <span style="float: left;margin-left: 10px">
                                字段名:{{prop}}
                        </span>
                <span style="float: left; margin-left: 20px;">
                                值:{{rowData[prop]}}
                        </span>
            </li>

            <TableContextMenuChild
                    v-for="(item, index) in listData"
                    :model="item"
                    :key="index"/>

        </ul>
    </div>

</template>

<script>
    import {ref} from 'vue'
    import TableContextMenuChild from './TableContextMenuChild'

    export default {
        name: "index",
        components: {TableContextMenuChild},
        emits: ['queryData', 'update:visible'],
        props: {
            left: {
                type: Number,
                default: 0
            },
            top: {
                type: Number,
                default: 0
            },
            prop: {
                type: String,
                default: null
            },
            visible: {
                type: Boolean,
                default: false
            },
            rowData: {
                type: Object,
                default: () => ({})
            },
            close: {
                type: Function,
                default: () => {
                }
            },
            searchData: {
                type: Array,
                default: () => []
            }
        },
        setup(props, context) {

            const option = ref('')

            const searchDataVa = ref(props.searchData)

            /**
             * 复制所选值
             */
            const copyVal = () => {
                copyText(props.prop)

            }

            /**
             * 复制所选值
             */
            const copyId = () => {
                copyText('id')
            }
            /**
             * 复制所选值
             */
            const copyText = (prop) => {
                var value = props.rowData[prop];
                //创建一个隐藏input（重要！）
                var oInput = document.createElement('input');
                //赋值
                oInput.value = value;
                document.body.appendChild(oInput);
                // 选择对象
                oInput.select();
                // 执行浏览器复制命令
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                currentClose()
            }

            /**
             * 刷新
             */
            const refresh = () => {
                context.emit("queryData")
                currentClose()
            }

            /**
             * 加入选项
             **/
            const joinOption = () => {

                for (let valueKey in searchDataVa.value) {
                    if (searchDataVa.value[valueKey].prop == props.prop) {
                        searchDataVa.value[valueKey].value = props.rowData[props.prop]
                        searchDataVa.value[valueKey].condition = "="
                        refresh()
                        return
                    }
                }
            }

            const listData = ref([
                {
                    menuName: "复制值",
                    icon: "el-icon-document-copy",
                    className:"box1",
                    event: copyVal,
                    postfix: "Ctrl+C",
                },{
                    menuName: "复制主键",
                    icon: "el-icon-document-copy",
                    className:"box1",
                    event: copyId,
                    postfix: "Ctrl+C [id]",
                },
                {
                    menuName: "加入筛选",
                    icon: "el-icon-set-up",
                    event: joinOption,
                    postfix: "",
                },
                {
                    menuName: "刷新",
                    icon: "el-icon-refresh-right",
                    event: refresh,
                    postfix: "F5"
                },
            ])

            /**
             * 关闭函数
             */
            const currentClose = () => {
                context.emit("update:visible", false)
                props.close()

            }

            return {
                //fun
                copyText,
                refresh,
                currentClose,
                //data
                option,
                listData
            }
        }
    }
</script>

<style lang="less" scoped>
    .contextmenu {
        width: 200px;
        margin: 0;
        background: #fff;
        z-index: 3000;
        position: absolute;
        list-style-type: none;
        padding: 2px 0;
        border-radius: 4px;
        font-size: 12px;
        color: #333;
        box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);

        li {
            line-height: 40px;
            height: 40px;
            padding: 0px 15px;
            overflow: hidden;
            border-bottom: 1px solid #EBEEF5;
            border-radius: 4px;

            &:hover {
                background: #131432;
                color: #DCDFE6;
            }
        }
    }

    .mask-overall {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        height: 100%;

        height: 100%;
        animation: move .3s linear;
        animation-fill-mode: forwards;
        @keyframes move {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        .mask-main {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 200px; //大小可自己定义
            height: 200px;
            background-color: #fff;
        }
    }
</style>